<template>
  <div>
    <transition name="bg">
      <div class="bg-box">
        <ul class="web-header" >
          <div class="web-header-menu">
            <li class="web-header-logo">
              <img src="../assets/images/logo.svg">
              <p class="kaiti">云笔记</p>
            </li>
            <li v-for="item in list" :key="item.id">
              <NuxtLink :to="item.path">
                <span :class="'iconfont' + ' ' + item.icon"></span>
                <span style="white-space: nowrap;">{{ item.title }}</span>
              </NuxtLink>
            </li>
          </div>
          <div class="web-header-login">
            <li class="web-header-search">
              <span class="iconfont icon-chaxun4" v-show="!showSearch" @click="changeSearch"></span>
              <transition name="searchinput">
                <n-input class="serch-input" placeholder="搜索" size="small"  v-show="showSearch" @keydown="searchData($event)" v-model:value="searchValue">
                  <template #prefix>
                    <n-icon :component="Search" />
                  </template>
                </n-input>
              </transition>
            </li>
            <li class="pcLogin">
              <div class="pcLogin-login" v-if="!userInfo">
                <n-icon size="20">
                  <LogInOutline />
                </n-icon>
                <NuxtLink style="color: #fff;text-decoration:none;" to="/login">登录/注册</NuxtLink>
              </div>
              <div class="pcLogin-user" v-else>
                <el-dropdown>
                  <div class="pcLogin-user_button">
                    <img :src="userInfo.avatar">
                    <div>
                      <h2>{{ userInfo.userName }}</h2>
                    </div>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="outLogin">退出登录</el-dropdown-item>
                      <el-dropdown-item @click="resetPass">修改密码</el-dropdown-item>
                      <el-dropdown-item @click="resetInfo">修改资料</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </li>
          </div>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script lang="ts"  setup>
import { Search,LogInOutline } from '@vicons/ionicons5'
const showSearch = ref(false)
const searchValue = ref('')
const changeSearch = () => {
  showSearch.value = true
}
//用户信息
const userInfo = ref()
const searchData = (e)=>{
  if(e.keyCode == '13'){
    console.log(searchValue.value)
  }
}
const list =  reactive([
  { id:1,title:'首页',icon:'icon-shouye1', path:'/' },
  { id:2,title:'关于我',icon:'icon-user',path:'/aboutMe' },
  { id:3,title:'技术分享',icon:'icon-fenxiang',path:'/list' },
  { id:4,title:'随记',icon:'icon-biji',path:'/notes' },
  { id:5,title:'留言板',icon:'icon-liuyanban-xian',path:'/msgBoard' },
  { id:8,title:'赞助',icon:'icon-zanzhu',path:'/sponsor' },
  { id:9,title:'统计',icon:'icon-tongji2',path:'/statistics' }
])
//退出登录
const outLogin = () => {
  localStorage.removeItem('userInfo')
  userInfo.value = localStorage.getItem('userInfo')
}
//修改密码
const resetPass = () => {
  navigateTo({
    path:'/reset',
    query:{
      title:'修改密码',
      type:'editPass'
    }
  })
}
//修改资料
const resetInfo = () => {
  navigateTo({
    path:'/reset',
    query:{
      title:'修改资料',
      type:'editInfo'
    }
  })
}
onMounted(()=>{
  document.addEventListener('click',(e) => {
    if(e.target.className != 'n-input__input-el' && e.target.className != 'iconfont icon-chaxun4'){
      showSearch.value = false
    } else {
      showSearch.value = true
    }
  })
  if(process.client){
    userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
  }
})
</script>

<style lang="scss">
.bg-box{
  width: 100%;
  height: 60px;
  position: fixed;
  box-shadow: 0 1px 10px rgba(130,130,134,.4);
  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
  background-blend-mode: multiply,multiply;
  z-index: 999;
}
.web-header{
  margin: 0 auto;
  height: 60px;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
  background-blend-mode: multiply,multiply;
  top: 0;
  transition:cubic-bezier(0.25,0.1,0.25,1);
  background: transparent;
  &-menu{
    display: flex;
    align-items: center;
  }
  &-login{
    display: flex;
    align-items: center;
  }
  li{
    color: #fff;
    margin-right: 20px;
    font-size: 16px;
    cursor: pointer;
    vertical-align: middle;
  }
  li a:hover{
    color: #eeeeee;
  }
  &-search{
    margin-left: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 200px;
  }
  &-logo{
    display: flex;
    align-items: center;
    white-space: nowrap;
    p{
      font-size: 24px;
      // color: $yun-brand-1-normal;
    }
    img{
      height: 28px;
    }
  }
}
.like{
  &-button{
    margin-left: 10px;
    margin-bottom: 10px;
  }
}
.pcLogin{
  width: 300px;
  display: flex;
  justify-content: flex-end;
  &-login{
    display: flex;
    align-items: center;
  }
  &-user{
    &_button{
      display: flex;
      align-items: center;
      outline: none;
      img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 5px;
      }
      div{
        h2{
          font-size: 16px;
          color: #fff;
        }
      }
    }
  }
}
/* 离开后的状态 */
.bg-leave-to,
/* 从什么状态进入 */
.bg-enter-from {
  opacity: 0;
  transform: translateY(-80px);
}
 
/* 开始离开的状态 */
.bg-leave-from,
/* 进入之后打算变成的状态 */
.bg-enter-to {
  opacity: 1;
  transform: translateY(0);
}
 
/* 离开过程中做什么 */
.bg-leave-active,
/* 进入的过程中做什么 */
.bg-enter-active {
  transition: all 0.5s linear;
}

.searchinput-leave-to,
.searchinput-enter-from {
  opacity: 0;
  transform: translateX(80px);
}
.searchinput-leave-from,
.searchinput-enter-to {
  opacity: 1;
  transform: translateX(0);
}
.searchinput-leave-active,
.searchinput-enter-active {
  transition: all 0.5s;
}
@media screen and (max-width: 900px) {
  .bg-box{
    display: none;
  }
  .app-box{
    display: block;
  }
}
@media screen and (min-width: 900px) {
  .bg-box{
    display: block;
  }
  .app-box{
    display: none;
  }
}
.el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  // transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: $yun-color;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
}
.avatar{
  width: 80px;
  height: 80px;
}
.dialog-form{
  z-index: 999999999999999;
}
</style>